<template>
  <view :class="[variables.ns.b, variables.ns.s('disabled', disabled), variables.ns.s('active', state.active)]"
    @click="config?.change(props)">
    <view :class="[variables.ns.e('text')]">
      <slot>{{ label ?? value }}</slot>
    </view>
    <view class="iconfont icon-select"></view>
  </view>
</template>

<script lang="ts" setup>
import { OptionNS, variables } from '.'
import { inject, reactive, watch } from 'vue'
import { variables as parentVariables } from '..'

defineOptions({
  name: OptionNS.name
})
const props = defineProps(OptionNS.props)
const config = inject<parentVariables.ProvideContext>(parentVariables.provideName)
const state = reactive({
  active: false
})

watch(
  [
    () => props.value,
    () => {
      if (Array.isArray(config?.props.modelValue)) return config.props.modelValue.length
      return config?.props.modelValue
    }
  ],
  () => state.active = config?.isActive(props)!,
  { immediate: true }
)
</script>